<template>
    <view class="content">
        <view class="content__cover">
            <image class="content__cover-image" src="/static/logo.png" mode="aspectFill"></image>
        </view>
        <view class="content__introduction">
            <IntroductionCard title="2025年全国心理咨询师考试报名" desc="筛查焦虑、抑郁、压力水平等常见心理指标，识别情绪波动规律，提供应对策略与专业资源指引。"
                :price="{current:100,original:80}">
                <template #statistic>
                    已报10人/招募50人
                </template>
                <template #extra-content>
                    <view class="content__info">
                        <view class="content__info-item">
                            <uv-icon name="clock"></uv-icon>
                            <view class="content__info-title">报名时间：</view>2025-03-01 12：:0 - 2025-03-01 12：00
                        </view>
                        <view class="content__info-item">
                            <uv-icon name="clock"></uv-icon>
                            <view class="content__info-title">活动时间：</view>2025-03-01 12：:0 - 2025-03-01 12：00
                        </view>
                        <view class="content__info-item">
                            <uv-icon name="map"></uv-icon>
                            <view class="content__info-title">活动地址：</view>四川省成都市金牛区xxx
                        </view>
                    </view>
                </template>
            </IntroductionCard>
        </view>
        <uv-tabs :list="[{name:'详情'},{name:'须知'},{name:'现场'},{name:'@热评',badge:{value:99}}]"
            :activeStyle="{color:'#6e64c2',padding:'10rpx 20rpx',fontWeight:'bold'}" lineColor="#6e64c2"
            :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx',color:'#666a74'}"
            :scrollable="false">
        </uv-tabs>
        <view class="content__card">
            <view class="content__card-header">
                <Mytitle name="活动详情" icon="bar" fontWeight="bold"></Mytitle>
            </view>
            <view class="content__card-body">
                瑞士心理学家荣格(Carl Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段瑞士心理学家荣格(Carl
                Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段瑞士心理学家荣格(Carl
                Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段
            </view>
        </view>
        <view class="content__card">
            <view class="content__card-header">
                <Mytitle name="活动须知" icon="bar" fontWeight="bold"></Mytitle>
            </view>
            <view class="content__card-body">
                瑞士心理学家荣格(Carl Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段瑞士心理学家荣格(Carl
                Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段瑞士心理学家荣格(Carl
                Jung)认为：感知和判断是大脑的两大基本功能。大脑做决定的瞬间可以慢动作分解为两个阶段：感知阶段
            </view>
        </view>
        <view class="content__card">
            <view class="content__card-header">
                <Mytitle name="活动现场" icon="bar" fontWeight="bold"></Mytitle>
            </view>
            <view class="content__card-body">
                <uv-album :urls="urls" multipleSize="21vw" space="8rpx" maxCount="12" rowCount="4"></uv-album>
                <view class="content__comment">
                    <CComment ref="ccRef" v-model:myInfo="myInfo" v-model:userInfo="userInfo"
                        v-model:tableData="tableData" v-model:tableTotal="tableTotal" :deleteMode="deleteMode"
                        @likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun"></CComment>
                    <view class="content__card-btn" @tap="openComment">发表新评论</view>
                </view>
            </view>
        </view>
        <view class="content__footer">
            <TabBar theme="custom">
                <template #bar>
                    <Mybutton title="￥29.9 我要报名" :transition="true" color="#fff" width="380rpx" borderRadius="30rpx">
                    </Mybutton>
                </template>
            </TabBar>
            <!-- <view class="content__footer-btn">
                <Mybutton title="立即购买" :transition="true"></Mybutton>
            </view> -->
        </view>
    </view>
</template>
<script lang="ts" setup>
    import IntroductionCard from "@/components/IntroductionCard.vue";
    import Mytitle from "@/components/Title.vue";
    import Mybutton from "@/components/Button.vue";
    import TabBar from "@/components/TabBar.vue";
    import CComment from "@/components/cc-comment/cc-comment.vue";
    import { ref } from "vue";
    const urls = [
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
    ];
    // 唤起新评论弹框
    let ccRef = ref(null);
    function openComment() {
        ccRef.value.newCommentFun();
    }

    // 点赞回调事件
    function likeFun({ params }, callback) {
        console.log("likeFun", params);
        // 当请求失败, 调用callback重置点赞效果;
        // Demo如下:
        // axios.post("http://xxx/like", { id: params }).then((res) => {
        //   if (res.code !== 0) {
        //     callback(res);
        //   }
        // });
    }

    // 评论回调事件
    function replyFun({ params }, callback) {
        console.log("replyFun", params);
        // 当请求成功, 调用callback执行评论插入;
        // Demo如下:
        // axios.post("http://xxx/reply", { ...params }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
        setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
    }

    /** 删除回调事件
     * mode 删除模式
     * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
     * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
     * -- all : 删除所有评论包括回复评论
     */
    const deleteMode = ref("all");
    function deleteFun({ params, mode }, callback) {
        console.log("deleteFun", { params, mode });
        // 当请求成功, 调用callback执行评论删除;
        // Demo如下:
        // axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        switch (mode) {
            case "bind":
                // 逻辑: 调用接口进行用户评论内容修改 update
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            case "only":
                // 逻辑: 调用接口删除一个评论 delete
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            default:
                // all
                // 逻辑: 调用接口删除多个评论 [delete]
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
        }
    }

    // ----模拟数据------模拟数据------模拟数据----
    // 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let myInfo = ref({
        user_id: 1, // 用户id
        user_name: "cc", // 用户名
        user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
    });
    // 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let userInfo = ref({
        user_id: 2, // 用户id
        user_name: "ikun", // 用户名
        user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
    });
    let tableTotal = ref(4); // 评论总数
    let tableData = ref([
        {
            id: 120, // 评论id
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 2, // 用户id
            user_name: "ikun", // 用户名
            user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
            user_content: "唱,跳,rap,篮球", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 120, // 点赞数统计
            create_time: "2025-02-19 09:16", // 创建时间
        },
        {
            id: 130,
            parent_id: 120, // 评论父级的id
            reply_id: 120, // 被回复评论的id
            reply_name: "ikun", // 被回复人名称
            user_id: 3, // 用户id
            user_name: "小黑子", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
            user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 67, // 点赞数统计
            create_time: "2025-03-07 00:06", // 创建时间
        },
        {
            id: 140,
            parent_id: 120, // 评论父级的id
            reply_id: 130, // 被回复评论的id
            reply_name: "小黑子", // 被回复人名称
            user_id: 4, // 用户id
            user_name: "守护宗主维护宗门", // 用户名
            user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
            user_content: "你露出鸡脚了", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 16, // 点赞数统计
            create_time: "2025-05-10 17:08", // 创建时间
        },
        {
            id: 150,
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 5, // 用户id
            user_name: "音乐制作人", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
            user_content:
                "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
            is_like: true, // 用户是否点赞
            like_count: 8, // 点赞数统计
            create_time: "2025-12-21 00:45", // 创建时间
        },
    ]); // 评论表
</script>
<style lang="scss" scoped>
    .content {
        background-color: #f3f5fd;
        padding-bottom: 120rpx;

        &__cover {
            height: 300rpx;
            overflow: hidden;

            &-image {
                width: 100%;
            }
        }

        &__introduction {
            position: relative;
            margin-top: -30rpx;
            border-radius: 20rpx 20rpx 0 0;
            overflow: hidden;


        }

        &__info {
            border-top: 1px #f7f7fa solid;
            display: flex;
            flex-direction: column;
            font-size: 24rpx;
            padding-top: 15rpx;
            margin-top: 15rpx;
            color: #62666e;

            &-item {
                display: flex;
                margin: 5rpx 0;
            }

            &-title {
                color: #787b82;
                margin: 0 10rpx;
            }
        }

        &__card {
            padding: 20rpx;
            background-color: #fff;
            margin-bottom: 15rpx;

            &-header {
                padding: 20rpx 0;
            }

            &-body {
                font-size: 26rpx;
                color: #82838c;
            }

            &-btn {
                text-align: center;
                color: #fff;
                padding: 20rpx;
                margin: 50rpx;
                border-radius: 20rpx;
                background-color: #2979ff;
            }
        }

        &__footer {}

        &__comment {
            margin-top: 10rpx;
        }

    }
</style>